<template>
	<view class="content">
		<uni-forms :modelValue="form" class="form" :rules="rules" ref="form">
			<uni-forms-item label="姓名" required name="count">
				<uni-easyinput placeholder="请输入账号(手机号码)" v-model="form.count"/>
			</uni-forms-item>
			<uni-forms-item label="密码" required name="pwd">
				<uni-easyinput placeholder="请输入密码" v-model="form.pwd" type="password"/>
			</uni-forms-item>
		</uni-forms>
		<view class="btns">
			<button type="default" @click="toRegister()">注册</button>
			<button type="primary" @click="toHome()">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					count:'',
					pwd:'',
				},
				rules:{
					count:{
						rules:[
							{
								required: true,
								errorMessage: '请输入手机号码',
							},
							{
								pattern:/^1[34578][0-9]{9}$/,
								errorMessage: '手机号码格式错误',
							}
						]
					},
					pwd:{
						rules:[
							{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								pattern:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,16}$/,
								errorMessage: '密码格式错误',
							}
						]
					}
				}
			
			}
		},
		methods: {
			toRegister(){
				uni.navigateTo({
					url:"../register/register"
				})
			},
			toHome(){
				// 登录请求
				let user={
					name:this.form.count,
					pwd:this.form.pwd
				}
				user=JSON.stringify(user)
				console.log(user)
				this.$request('/api/news', user,'get').then(res => {
					// 打印调用成功回调
					console.log(res)
				}).catch(error => {
					console.log(error)
				})
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					uni.setStorage({
						key:"tel",
						data:this.form.count
					})
					uni.switchTab({
						url:'../index/index'
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
				
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		width: 100%;
		height: 100%;
		background: url('../../static/imgs/bg1.png') no-repeat;
		background-size: cover;	
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.form{
			width: 80%;
			padding: 20px;
			background-color: rgb(255,255,255);
			border-radius: 30px;
		}
		.btns{
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-top: 30px;
			button{
				margin: 0 20px;
				padding: 0 30px;
			}
		}
	}
</style>
